<template>
  <div id="userPage">
  <template v-if="user">

      <van-space style="margin-top: 20px; margin-left: 20px; display: flex; justify-content: center;">
        <van-image
            round
            width="80"
            height="80"
            :src="user?.avatarUrl"
            @click="toUserUpdatePage"
        />
      </van-space>

<!--    <van-cell title="当前用户" :value="user?.username" />-->
    <van-cell center style="margin-top: 20px">
      <template #icon>
        <van-icon name="star-o" size="20" style="margin-right: 5px" color="#1989fa"/>
      </template>
      <template #title>
        <span style="margin-left: 5px">当前用户</span>
      </template>
      <template #value>
        <span style="margin-right: 8px">{{ user?.username }}</span>
      </template>
    </van-cell>

    <van-cell center style="margin-top: 5px">
      <template #icon>
        <van-icon name="label-o" size="20" style="margin-right: 5px" color="#1989fa"/>
      </template>
      <template #title>
        <span style="margin-left: 5px">我的标签</span>
      </template>
      <template #value>
        <van-tag v-for="tag in user.tags" plain type="danger" style="margin-right: 8px;margin-top: 8px">
          {{ tag }}
        </van-tag>
      </template>
    </van-cell>

    <van-grid :border="false" style="padding: 10px">
      <van-grid-item text="创建的队伍" to="/user/team/create">
        <template #icon>
          <van-icon class-prefix="my-icon" name="myCreateTeam" size="23" style="margin-bottom: 8px;color: #0048ff"/>
        </template>
      </van-grid-item>

      <van-grid-item text="加入的队伍" to="/user/team/join">
        <template #icon>
          <van-icon class-prefix="my-icon" name="jiarubanji" size="23" style="margin-bottom: 8px;color: #11d35d"/>
        </template>
      </van-grid-item>

      <van-grid-item text="联系作者" @click="customerService">
        <template #icon>
          <van-icon class-prefix="my-icon" name="fankui" size="23" style="margin-bottom: 8px;color: #0a0dd2"/>
        </template>
      </van-grid-item>

      <van-grid-item text="用户签到" @click="userSign(user.id)">
        <template #icon>
          <van-icon name="bulb-o" size="23" style="margin-bottom: 8px;color: #0a0dd2"/>
        </template>
      </van-grid-item>

      <van-grid-item text="历史签到" @click="toUserSignPage">
        <template #icon>
          <van-icon name="records" size="23" style="margin-bottom: 8px;color: #0c9dea"/>
        </template>
      </van-grid-item>

    </van-grid>

    <van-cell title="个人资料" style="margin: 20px 0 20px 0; " is-link to="/user/update" :center="true">
      <template #icon>
        <van-icon name="setting-o" size="20" style="margin-right: 10px" color="#1989fa"/>
      </template>
    </van-cell>

<!--    <van-cell title="修改信息" is-link to="/user/update" />-->
<!--    <van-cell title="我创建的队伍" is-link to="/user/team/create" />-->
<!--    <van-cell title="我加入的队伍" is-link to="/user/team/join" />-->
    <div style="margin: 16px;">
      <van-button style="background-color:#EA9797 ;margin-left: 60px;margin-top: 10px;width: 220px; font-size: 16px"
                  round
                  type="default" native-type="submit"
                  @click="logout">
        退 出
      </van-button>
    </div>
    <van-dialog v-model:show="showCustomerService" title="加加加~">
      <van-image
          :src=authorWxImage
      />
    </van-dialog>
  </template>
  </div>
</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {Toast} from "vant";
import {getCurrentUser} from "../services/user";
import authorWxImage from "../assets/AuthorImag.jpg"


const user = ref();
const router = useRouter();
const showCustomerService = ref(false)



onMounted(async () => {
  let currentUser = await getCurrentUser();
  if (currentUser) {
    user.value = currentUser
    if (currentUser.tags) {
      currentUser.tags = JSON.parse(currentUser.tags)
    }
  } else {
    Toast.fail('未登录');
    await router.replace("/user/login")
  }
})

/**
 * 修改个人信息
 * @param editKey
 * @param editName
 * @param currentValue
 */
const toEdit = (editKey: string, editName: string, currentValue: string) => {
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue,
    }
  })
}

/**
 * 注销登录
 */
const logout = async () => {
  const res = await myAxios.post('/user/logout');
  if (res.code === 0) {
    Toast.success('退出登录成功');
    router.replace({
      path: '/user/login',
    })
  } else {
    Toast.fail('退出登录失败');
  }
}

/**
 * 用户签到
 * @param userId
 */
const userSign = async (userId: any) => {
  let userSign = await myAxios.post("/user/sign/" + userId);
  if (userSign.code === 0) {
    Toast.success("签到成功!")
  } else {
    Toast.fail("签到失败," + userSign.data.description)
  }
}

/**
 * 跳转至签到历史页
 */
const toUserSignPage = () => {
  router.push("/user/sign")
}

/**
 * 跳转个人信息编辑页
 */
const toUserUpdatePage = () => {
  router.push("/user/update")
}

/**
 * 跳转至编辑个性签名页
 */
const toEditProfile = () => {
  router.push({
    path: "/user/edit",
    query: {
      editKey: "profile",
      editName: "个性签名",
      editValue: user.value.profile
    }
  })
}

/**
 * 打开作者联系方式
 */
const customerService = () => {
  showCustomerService.value = true
}

</script>

<style scoped>

</style>
